<template>
	<view>
		<!-- 推荐歌单 -->
		<view class="song-list">
			<view class="tit-bar">
				推荐歌单
				<navigator :url="url" class="more fr">
					歌单广场
				</navigator>
			</view>
				
			<scroll-view scroll-x=true class="scroll-view" >
				  <view class="item" v-for="item in songs" :key="item.id" @click="getSongs(item)">
				  	<image :src="item.picUrl" class="img"></image>
					<view class="desc ellipsis">{{item.name}}</view>
				  	<view class="count">{{item.playCount}}</view>
				  </view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"song",
		data() {
			return {
				
			};
		},
		props:{
			url:{
				type:String,
				default:"#"
			},
			songs:{
				type:Array,
				default:[]
			}
		},
		methods:{
			getSongs(item){
				uni.navigateTo({
					url: `/pages/subpages/album/album?id=${item.id}`
				});
			}
		}
		
		
		
		
	}
</script>

<style>
.song-list {
		padding-left: 32rpx;

		.tit-bar {
			font-size: 34rpx;
			font-weight: 600;
			line-height: 110rpx;
		}

		.more {
			width: 150rpx;
			height: 50rpx;
			line-height: 50rpx;
			text-align: center;
			margin-top: 30rpx;
			margin-right: 32rpx;
			color: #333;
			font-weight: 400;
			font-size: 24rpx;
			border: 2rpx solid #e6e6e6;
			border-radius: 50rpx;
		}

		.switch-line {
			justify-content: space-between;
			color: #999;

			.flex-box {
				line-height: 110rpx;
				width: 300rpx;
			}

			.switch-item {
				font-weight: 600;

				&:first-child {
					width: 80rpx;
				}

				&:last-child {
					padding-left: 22rpx;
				}

				&.on {
					color: #333;
					font-size: 34rpx;
				}
			}
		}

		.scroll-view {
			width: 100%;
			/* white-space: nowrap; */
		}

		.item {
			position: relative;
			display: inline-block;
			width: 218rpx;
			padding-bottom: 16rpx;
			margin-right: 16rpx;
			line-height: 34rpx;

			&:before {
				content: " ";
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 40rpx;
				z-index: 2;
				background-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent);
			}

			&.video {
				width: 450rpx;
			}

			.img {
				display: block;
				width: 100%;
				height: 218rpx;
				margin-bottom: 16rpx;
				background: #eee;
				border-radius: 10rpx;
			}
		}

		.count {
			position: absolute;
			top: 0;
			right: 0;
			padding-left: 25rpx;
			line-height: 34rpx;
			color: #fff;
			font-size: 24rpx;
			z-index: 10;
			background: url() no-repeat;
			background-size: 25rpx 25rpx;
			transform: scale(0.8);
		}
	}

</style>